<template>
  <div id="nav">
    <!-- 导航栏 -->
    <div id="nav-all">
      <div class="nav-bottom">
        <div class="nav-con">
          <div class="nav-son nav-first"
               :class="{textbottom:navIndex==1}"
               @click="navIndex=1;toHome()">选品库</div>
          <div class="nav-son nav-second"
               :class="{textbottom:navIndex==2}"
               @click="navIndex=2;toRealTime()">实时榜单</div>
          <div class="nav-son nav-third"
               :class="{textbottom:navIndex==3}"
               @click="navIndex=3;toGoodList()">好单预告</div>
          <div class="nav-son nav-fourth"
               :class="{textbottom:navIndex==4}"
               @click="navIndex=4;toPictureTool()">图片生成工具</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  methods: {
      toHome(){
          this.$router.push({path:"/"})
      },
      toRealTime(){
          this.$router.push({path:"/real_time"})
      },
      toGoodList(){
          this.$router.push({path:"/goods_list"})
      },
      toPictureTool(){
          this.$router.push({path:"/picture_tool"})
      }
  }
}
</script>

<style lang="scss" scoped>

// 去除按钮默认样式
@mixin clearBtn{
    border: 0;
    background-color: transparent;
    outline: none;
}
// 图片居中显示
@mixin imgCenter{
    width:50%;
    height: 50%;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    &>img{
        width:100%;
    }
} 
// 导航栏
#nav{
  color:#333;
  background: #F7FBFF;
 #nav-all {
        width: 100%;
        .nav-bottom {
            width: 100%;
            border-bottom: 1px solid #eee;
            font-family: 'MicrosoftYaHei';
            font-weight: bold;
            .nav-con {
                width: 1200px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                font-size: 16px;
                margin: 0 auto;
                cursor: pointer;
                &>.nav-son {
                    width: 150px;
                    float: left;
                    box-sizing: border-box;
                }
                &>.nav-son:hover{
                    color:#2878FF;
                }
                /* .textbottom {
                    box-sizing: border-box;
                    border-bottom: 3px solid #ED3A29;
                    color: #ED3A29;
                } */
            }
        }
        // 全网商品分类
        .nav-con2 {
            width: 100%;
            .nav-all-con {
                width: 1200px;
                margin: 0 auto;
                padding-top: 10px;
                .nav-all-list {
                    .all-list-title {
                        width: 6%;
                        height: 80px;
                        float: left;
                        font-size: 16px;
                        color: #666;
                        font-weight: bold;
                    }
                    .all-list-con {
                        width: 94%;
                        height: 80px;
                        float: left;
                        font-size: 0;
                        &>span {
                            width: 90px;
                            height: 30px;
                            display: inline-block;
                            font-size: 12px;
                            color: #666;
                            padding-top: 3px;
                            cursor: pointer;
                        }
                        &>span:hover {
                            color: #ED3A29;
                        }
                    }
                }
                .nav-all-check {
                    .all-check-title {
                        width: 6%;
                        height: 50px;
                        line-height: 50px;
                        float: left;
                        font-size: 16px;
                        color: #666;
                        font-weight: bold;
                    }
                    .all-check-con {
                        width: 94%;
                        height: 50px;
                        padding-top: 8px;
                        display: flex;
                        font-size: 12px;
                        .nav-price,
                        .nav-quan,
                        .nav-bili,
                        .nav-sales,
                        .nav-input {
                            &>input {
                                border: 0;
                                width: 70px;
                                height: 30px;
                                border: 1px solid #ccc;
                                border-radius: 1px;
                                margin-left: 10px;
                                margin-right: 10px;
                                color: #666;
                                padding-left:10px;
                            }
                        }
                        .nav-price {
                            flex: 5;
                            &>input {
                                margin-right: 0 5px;
                            }
                        }
                        .nav-quan,.nav-bili,.nav-sales,.nav-right {
                            flex: 4;
                        }
                        .nav-input {
                            flex: 2;
                            .input-con {
                                &>input {
                                    width: 80px;
                                    height: 35px;
                                    border-radius: 3px;
                                    background: #ED3A29;
                                    color: #fff;
                                    @include clearBtn;
                                    background: #ED3A29;
                                }
                            }
                        }
                    }
                }
            }
        }
        // 全网分类标题
        .nav-allweb-list {
            width: 100%;
            background: #F7FBFF;
            .nav-allweb-top {
                width: 100%;
                height: 15px;
                margin-top: 10px;
            }
            .allweb-list-con {
                width: 100%;
                background: #F7FBFF;
                .allweb-all {
                    width: 1200px;
                    margin: 0 auto;
                    display: flex;
                    &>div {
                        height: 30px;
                        line-height: 30px;
                        text-align: center;
                        font-size: 14px;
                        font-weight: 700;
                        color: #666;
                    }
                    .allweb-list-sales,.allweb-list-right {
                        flex: 1;
                        cursor: pointer;
                    }
                    /* .textbottom2 {
                        color:#fff;
                        background: orangered;
                    }
                    .textbottom2::after {
                        display: block;
                        content: "";
                        border-top: 2px solid #ED3A29;
                        width: 60%;
                        margin: -5px auto 0;
                    } */
                }
            }
        }
    }
}
   
  
</style>